<template>
  <div class="w-full h-full" ref="chinaMapRef"> </div>
</template>
<script setup lang="ts">
import echarts from '@/plugins/echarts'
import chinaMap from './chinaMap.json'
import { mapData } from '../../index'
defineOptions({ name: 'RepSubsidiaryChart' })
const chinaMapRef = ref()

function init() {
  echarts.registerMap('china', { geoJSON: chinaMap })
  var myChart = echarts.init(chinaMapRef.value)
  var option = {
    visualMap: {
      min: 0,
      max: 1000,
      left: 'left',
      top: 'bottom',
      text: ['高', '低'],
      calculable: false,
      inRange: {
        color: ['#467bc0' ,'#04387b'],
        symbolSize: [30, 100]
      }
    },
    tooltip: {
      padding: 0,
      enterable: true,
      transitionDuration: 1,
      textStyle: {
        color: '#000',
        decoration: 'none'
      },
      formatter: function (params) {
        const { name, value, allotValue } = params.data
        var tipHtml = ''
        tipHtml =
          '<div style="width:200px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7)">' +
          '<div style="width:100%;height:40px;line-height:40px;border-bottom:2px solid rgba(7,166,255,0.7);padding:0 20px">' +
          '<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;border-radius:40px;">' +
          '</i>' +
          '<span style="margin-left:10px;color:#fff;font-size:16px;">' +
          name +
          '</span>' +
          '</div>' +
          '<div style="padding:20px">' +
          '<p style="color:#fff;font-size:12px;">' +
          '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
          '</i>' +
          '闲置原值：' +
          '<span style="color:#11ee7d;margin:0 6px;">' +
          value +
          '</span>' +
          '个' + 
          '</p>' +
          '<p style="color:#fff;font-size:12px;">' +
          '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
          '</i>' +
          '闲置净值：' +
          '<span style="color:#f48225;margin:0 6px;">' +
          allotValue +
          '</span>' +
           '个' + 
          '</p>' +
          '</div>' +
          '</div>'

        return tipHtml
      }
    },
    series: [
      {
        name: '闲置周转材料分布图',
        type: 'map',
        mapType: 'china',
        selectedMode: 'false',
        roam: true,
        layoutCenter: ['50%', '68%'], // 地图中心位置（水平 40%，垂直 50%）
        layoutSize: '135%', // 地图大小
        itemStyle: {
          // 正常状态下的样式
          normal: {
            areaColor: '#04387b', // 区域颜色
            borderColor: '#fff', // 边框颜色
            borderWidth: 1 // 边框宽度
          },
          // 移入状态下的样式
          emphasis: {
            areaColor: '#2F5BAF', // 移入时的区域颜色
            borderColor: '#fff', // 移入时的边框颜色
            borderWidth: 2 // 移入时的边框宽度
          }
        },
        label: {
          normal: {
            //静态的时候展示样式
            show: true, //是否显示地图省份得名称
            textStyle: {
              color: '#fff',
              fontSize: 12
            }
          },
          emphasis: {
            //动态展示的样式
            color: '#fff'
          }
        },
        data: mapData
      }
    ]
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}

defineExpose({ init })
</script>
